<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>人物故事 - 移动端页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      }

      body {
        background-color: #f5f5f5;
        color: #333;
        max-width: 750px;
        margin: 0 auto;
        padding-bottom: 80px;
        position: relative;
        min-height: 100vh;
        overflow-x: hidden;
      }

      .container {
        max-width: 750px;
        margin: 0 auto;
        padding: 20px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      /* 头部导航 */
      .header {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .header h1 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }

      .more-link {
        color: #667eea;
        text-decoration: none;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 5px;
      }

      .more-link:hover {
        text-decoration: underline;
      }

      /* 家训寄语卡片容器 */
      .motto-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 20px;
      }

      /* 家训寄语卡片 */
      .motto-card {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        position: relative;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
      }

      .motto-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
      }

      /* 卡片标签 */
      .motto-label {
        position: absolute;
        top: 12px;
        left: 12px;
        background: rgba(139, 69, 19, 0.8);
        color: white;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 500;
        z-index: 2;
      }

      /* 删除按钮 */
      .delete-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        background: rgba(255, 255, 255, 0.8);
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 2;
        transition: background 0.3s ease;
      }

      .delete-btn:hover {
        background: rgba(255, 255, 255, 1);
      }

      .delete-btn i {
        font-size: 12px;
        color: #666;
      }

      /* 卡片背景图片 */
      .motto-bg {
        height: 240px;
        background-size: cover;
        background-position: center;
        position: relative;
      }

      .motto-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
      }

      /* 卡片内容 */
      .motto-content {
        padding: 15px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(248, 140, 18, 0.6));
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 15px;
      }

      .motto-title {
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .motto-text {
        font-size: 12px;
        color: #fff;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      /* 左侧卡片 - 食物主题 */
      .motto-card.food-theme .motto-bg {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><rect width="300" height="200" fill="%23f5f5dc"/><circle cx="150" cy="100" r="40" fill="%23fff"/><circle cx="120" cy="80" r="15" fill="%2390EE90"/><circle cx="180" cy="90" r="12" fill="%23228B22"/></svg>');
      }

      /* 右侧卡片 - 风景主题 */
      .motto-card.landscape-theme .motto-bg {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23FFD700;stop-opacity:1" /><stop offset="100%" style="stop-color:%23FFA500;stop-opacity:1" /></linearGradient></defs><rect width="300" height="200" fill="url(%23grad1)"/><path d="M0,150 Q75,100 150,120 T300,150 L300,200 L0,200 Z" fill="%234A90E2" opacity="0.3"/><path d="M50,140 Q100,100 150,110 T250,140 L250,200 L50,200 Z" fill="%234A90E2" opacity="0.5"/></svg>');
      }

      /* 响应式设计 */
      @media (max-width: 480px) {
        .container {
          padding: 15px;
        }

        .motto-container {
          grid-template-columns: 1fr;
          gap: 12px;
        }

        .header {
          padding: 15px;
        }

        .header h1 {
          font-size: 20px;
        }
      }

      /* 顶部状态栏 */
      .status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background-color: #fff;
        border-bottom: 1px solid #e0e0e0;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      }

      .record-info {
        font-size: 15px;
        color: #666;
        font-weight: 500;
      }

      .record-btn {
        background: linear-gradient(to right, #4a4a4a, #2c2c2c);
        border: none;
        border-radius: 20px;
        padding: 8px 20px;
        font-size: 15px;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .record-btn:hover {
        background: linear-gradient(to right, #3a3a3a, #1c1c1c);
        transform: translateY(-2px);
      }

      /* 顶部大图Banner */
      .banner {
        height: 280px;
        background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-direction: column;
        text-align: center;
        padding: 0 20px;
      }

      .banner h1 {
        font-size: 32px;
        margin-bottom: 15px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        letter-spacing: 1px;
      }

      .banner p {
        font-size: 16px;
        max-width: 80%;
        line-height: 1.6;
        opacity: 0.9;
      }

      .banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');
        background-size: 20px 20px;
        opacity: 0.5;
      }

      /* 三栏目导航 */
      .nav-cards {
        display: flex;
        justify-content: space-between;
        padding: 20px 15px;
        background: #fff;
        border-bottom: 1px solid #eee;
      }

      .nav-card {
        flex: 1;
        text-align: center;
        padding: 15px 5px;
        border-radius: 10px;
        transition: all 0.3s;
        cursor: pointer;
      }

      .nav-card:hover {
        background: #f9f9f9;
        transform: translateY(-3px);
      }

      .nav-card i {
        font-size: 24px;
        color: #4a4a4a;
        margin-bottom: 10px;
      }

      .nav-card span {
        font-size: 14px;
        color: #333;
        display: block;
      }

      /* 三栏目卡片 */
      .feature-cards {
        display: flex;
        gap: 15px;
        padding: 20px 15px;
        background: #fff;
      }

      .feature-card {
        flex: 1;
        background: #f8f8f8;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition: all 0.3s;
      }

      .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      .card-img {
        height: 120px;
        /* background: linear-gradient(to bottom right, #e0e0e0, #c0c0c0); */
        position: relative;
        overflow: hidden;
        background: url(https://t11.baidu.com/it/u=3444521317,261616140&fm=30&app=106&f=JPEG?w=640&h=434&s=17F2532576605115583C65D20100C0B3);
        background-size: cover;
      }

      .card-img::before {
        /* content: "栏目图片"; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #999;
        font-size: 14px;
      }

      .card-content {
        padding: 15px;
      }

      .card-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 5px;
        color: #222;
      }

      .card-subtitle {
        font-size: 13px;
        color: #777;
        line-height: 1.5;
      }

      /* 内容区域 */
      .content-section {
        padding: 20px;
        background-color: #fff;
        margin-top: 10px;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }

      .section-title {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #eee;
        position: relative;
        color: #2c2c2c;
      }

      .section-title::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background: #4a4a4a;
      }

      .sort-options {
        display: flex;
        margin-bottom: 20px;
        font-size: 14px;
        color: #666;
        flex-wrap: wrap;
      }

      .sort-option {
        margin-right: 15px;
        position: relative;
        cursor: pointer;
        padding: 5px 0;
      }

      .sort-option.active {
        color: #000;
        font-weight: bold;
      }

      .sort-option:not(:last-child):after {
        content: "|";
        position: absolute;
        right: -10px;
        color: #ccc;
      }

      /* 卡片布局 */
      .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 30px;
      }

      .card {
        background: #fafafa;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
      }

      .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      .card-image {
        height: 180px;
        position: relative;
        overflow: hidden;
        background: url(https://t11.baidu.com/it/u=3444521317,261616140&fm=30&app=106&f=JPEG?w=640&h=434&s=17F2532576605115583C65D20100C0B3);
        background-size: cover;
      }

      .im2 {
        background: url(https://img14.360buyimg.com/pop/jfs/t1/192004/17/13818/144055/60f64091E36d6ef79/6568005c38991932.jpg);
        background-size: cover;
      }

      .card-image::before {
        /* content: "故事图片"; */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #999;
        font-size: 14px;
      }

      .card-content {
        padding: 15px;
      }

      .card-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 8px;
        color: #222;
      }

      .card-subtitle {
        font-size: 13px;
        color: #777;
        line-height: 1.4;
      }

      /* 广告Banner */
      .ad-banner {
        height: 150px;
        background: linear-gradient(45deg, #1e3c72, #2a5298);
        border-radius: 12px;
        margin: 25px 0;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
        padding: 0 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .ad-banner h3 {
        font-size: 22px;
        margin-bottom: 10px;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      }

      .ad-banner p {
        font-size: 14px;
        max-width: 80%;
        opacity: 0.9;
      }

      .ad-banner::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
        transform: rotate(30deg);
      }

      /* 底部导航 */
      .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 750px;
        margin: 0 auto;
        display: flex;
        background-color: #fff;
        border-top: 1px solid #e0e0e0;
        padding: 12px 0;
        z-index: 100;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
      }

      .nav-item {
        flex: 1;
        text-align: center;
        font-size: 12px;
        color: #666;
        cursor: pointer;
        transition: color 0.3s;
      }

      .nav-item i {
        display: block;
        font-size: 20px;
        margin-bottom: 5px;
      }

      .nav-item.active {
        color: #1a2a6c;
        font-weight: bold;
      }

      .nav-item:not(:last-child) {
        border-right: 1px solid #eee;
      }

      /* 响应式调整 */
      @media (max-width: 480px) {
        .cards-container {
          grid-template-columns: 1fr;
        }

        .card-image {
          height: 220px;
        }

        .banner {
          height: 240px;
        }

        .banner h1 {
          font-size: 28px;
        }
      }

      /* 动画效果 */
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .content-section,
      .banner,
      .nav-cards,
      .feature-cards {
        animation: fadeIn 0.6s ease-out forwards;
      }

      .content-section:nth-child(1) {
        animation-delay: 0.1s;
      }

      .content-section:nth-child(2) {
        animation-delay: 0.2s;
      }

      .feature-cards {
        animation-delay: 0.15s;
      }
    </style>
  </head>

  <body>
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="record-info">0/36 已录制</div>
      <button class="record-btn">开始录制</button>
    </div>

    <!-- 顶部大图Banner -->
    <div class="banner">
      <h1>探索人物故事</h1>
      <p>发现真实的人生经历，感受平凡中的伟大，记录每一个值得铭记的瞬间</p>
    </div>

    <!-- 三栏目导航 -->
    <div class="nav-cards">
      <div class="nav-card">
        <i class="fas fa-book-open"></i>
        <span>故事集</span>
      </div>
      <div class="nav-card">
        <i class="fas fa-microphone-alt"></i>
        <span>录制</span>
      </div>
      <div class="nav-card">
        <i class="fas fa-share-alt"></i>
        <span>分享</span>
      </div>
    </div>

    <!-- 三栏目导航 -->
    <div class="nav-cards">
      <div class="nav-card">
        <i class="fas fa-book-open"></i>
        <span>模版主题</span>
      </div>
      <div class="nav-card">
        <i class="fas fa-microphone-alt"></i>
        <span>时间轴</span>
      </div>
      <div class="nav-card">
        <i class="fas fa-share-alt"></i>
        <span>应用场景</span>
      </div>
    </div>

    <!-- 第一组内容 -->
    <div class="content-section">
      <h2 class="section-title">人物故事</h2>
      <div class="sort-options">
        <div class="sort-option active">综合排序</div>
        <div class="sort-option">最高热度</div>
        <div class="sort-option">最新上架</div>
        <div class="sort-option">查看全部</div>
      </div>

      <div class="cards-container">
        <div class="card">
          <div class="card-image"></div>
          <div class="card-content">
            <div class="card-title">梦里那边蓝色海洋</div>
            <div class="card-subtitle">一位航海家的三十年探险故事，穿越太平洋的壮丽旅程</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image"></div>
          <div class="card-content">
            <div class="card-title">山里的小学教师</div>
            <div class="card-subtitle">扎根山区教育二十年，改变了三代人的命运轨迹</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image"></div>
          <div class="card-content">
            <div class="card-title">创业者的十年</div>
            <div class="card-subtitle">从车库创业到上市公司CEO的跌宕起伏之路</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image"></div>
          <div class="card-content">
            <div class="card-title">非遗传承人</div>
            <div class="card-subtitle">守护百年传统工艺，让古老技艺焕发新生</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image"></div>
          <div class="card-content">
            <div class="card-title">创业者的十年</div>
            <div class="card-subtitle">从车库创业到上市公司CEO的跌宕起伏之路</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image"></div>
          <div class="card-content">
            <div class="card-title">非遗传承人</div>
            <div class="card-subtitle">守护百年传统工艺，让古老技艺焕发新生</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 广告Banner -->
    <div class="ad-banner">
      <h3>开启您的故事之旅</h3>
      <p>加入我们的创作者计划，分享您的独特人生经历</p>
    </div>

    <!-- 第二组内容 -->
    <div class="content-section">
      <h2 class="section-title">好物商城</h2>
      <!-- <div class="sort-options">
        <div class="sort-option active">本周热门</div>
        <div class="sort-option">本月热门</div>
        <div class="sort-option">年度精选</div>
      </div> -->

      <div class="cards-container">
        <div class="card">
          <div class="card-image im2"></div>
          <div class="card-content">
            <div class="card-title">卡通相机</div>
            <div class="card-subtitle">¥199</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image im2"></div>
          <div class="card-content">
            <div class="card-title">卡通相机</div>
            <div class="card-subtitle">¥199</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image im2"></div>
          <div class="card-content">
            <div class="card-title">卡通相机</div>
            <div class="card-subtitle">¥199</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image im2"></div>
          <div class="card-content">
            <div class="card-title">卡通相机</div>
            <div class="card-subtitle">¥199</div>
          </div>
        </div>
        <div class="card">
          <div class="card-image im2"></div>
          <div class="card-content">
            <div class="card-title">卡通相机</div>
            <div class="card-subtitle">¥199</div>
          </div>
        </div>

        <div class="card">
          <div class="card-image im2"></div>
          <div class="card-content">
            <div class="card-title">卡通相机</div>
            <div class="card-subtitle">¥199</div>
          </div>
        </div>
      </div>
    </div>

    <div class="content-section">
      <h2 class="section-title">家训寄语</h2>

      <!-- 家训寄语卡片 -->
      <div class="motto-container">
        <!-- 左侧卡片 - 食物主题 -->
        <div class="motto-card food-theme">
          <div class="motto-label">家训寄语</div>
          <!-- <button class="delete-btn">
            <i class="fas fa-trash"></i>
          </button> -->
          <div class="motto-bg"></div>
          <div class="motto-content">
            <div class="motto-title">一粥一饭,当思来之不易 ></div>
            <div class="motto-text">时光荏苒,家风永传。粗瓷碗里盛满着祖辈的智慧，每一粒米都承载着勤俭持家的传统美德...</div>
          </div>
        </div>

        <!-- 右侧卡片 - 风景主题 -->
        <div class="motto-card landscape-theme">
          <div class="motto-label">家训寄语</div>
          <!-- <button class="delete-btn">
            <i class="fas fa-trash"></i>
          </button> -->
          <div class="motto-bg"></div>
          <div class="motto-content">
            <div class="motto-title">孝道和美天下 ></div>
            <div class="motto-text">孝亲敬长传家久,和睦邻里德为本。粒粒皆辛苦，滴滴见真情，传承千年美德...</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航 -->
    <div class="bottom-nav">
      <div class="nav-item active">
        <i class="fas fa-home"></i>
        <span>首页</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-book"></i>
        <span>回忆录</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-handshake"></i>
        <span>加盟</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-shopping-bag"></i>
        <span>商城</span>
      </div>
      <div class="nav-item">
        <i class="fas fa-user"></i>
        <span>我的</span>
      </div>
    </div>

    <script>
      // 简单的交互效果
      document.querySelectorAll(".card, .feature-card, .nav-card").forEach((card) => {
        card.addEventListener("click", function () {
          this.style.transform = "scale(0.98)";
          setTimeout(() => {
            this.style.transform = "";
          }, 200);
        });
      });

      // 排序选项点击效果
      document.querySelectorAll(".sort-option").forEach((option) => {
        option.addEventListener("click", function () {
          document.querySelectorAll(".sort-option").forEach((opt) => {
            opt.classList.remove("active");
          });
          this.classList.add("active");
        });
      });

      // 底部导航点击效果
      document.querySelectorAll(".nav-item").forEach((item) => {
        item.addEventListener("click", function () {
          document.querySelectorAll(".nav-item").forEach((nav) => {
            nav.classList.remove("active");
          });
          this.classList.add("active");
        });
      });
    </script>
  </body>
</html>
